<template>
  <div>
    {{name}}{{age}}
    <button @click="update()">修改值</button>
  </div>
</template>

<script>
import { reactive,toRefs} from "vue";
export default {
  name: "app",
  setup() {
    //   让对象是响应式的
      var obj= reactive({
          name:'zhangsan',
          age:'18'
      })
    // console.log(obj);
    //   定义响应式数据：
// toRefs是函数，转换响应式对象中*所有*属性为单独响应式数据，对象obj2成为普通对象，并且值是关联的
    const obj2=toRefs(obj)
    // 转换后name和age都是对象
    // console.log(obj2);
    const update=()=>{
        // 要加obj2否则找不到
        obj2.name.value='lisi',
        obj2.age.value='15'
    }
    // 这里返回的是name
    return { ...obj2,update };

  },
};
</script>
